import React, { Component } from 'react';
import {  
  Link 
} from 'react-router-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

function handleClick(event) {
    event.preventDefault();
    console.log('嘻嘻');
}

class Item extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isClicked : false
        }
    }

    handleChosed = () => {
        var isClicked =  this.state.isClicked;
        this.setState({
            isClicked : !isClicked
        })
        console.log(isClicked);
        this.props.handleClick();
    }

    render() {
        return (
            <li onClick={ this.handleChosed } >{ this.state.isClicked ? 'clicked' : 'noclick' }</li>
        )
    }
}


class Toggle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toggle : true
        }
        this.handleClick2 = this.handleClick2.bind(this);
    }

    handleClick = () => {
        console.log(this.state.toggle);
        var toggle = this.state.toggle

        this.setState({
            toggle : !toggle
        })
    }

    handleClick2() {
        console.log(this.state.toggle);
        var toggle = this.state.toggle

        this.setState({
            toggle : !toggle
        })
    }

    handleChose = (event) => {
        console.log('xixi');
    }

    render() {
        const numbers = [1,2,3,4,5];
        const list = numbers.map(val => (
            <Item handleClick={ this.handleChose } key={val} />
        ));
        return (
            <div>
                <p onClick={ this.handleClick }>toggle1</p>
                <p onClick={ this.handleClick2 }>toggle2</p>
                <ul>
                    {list}
                </ul>
            </div>
        )
    }
}


var HelloWorld = () => (
    <div>
        Hello !!!；
        <Sb name="xixi" >SBSBSBS</Sb>
        <Toggle />
    </div>
);

var Sb = (props) => (
    <div>
        <p onClick={ handleClick } >sb, {props.name}</p>
        <p>{props.children}</p>
    </div>
)


class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>

          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}


export {
    TodoList
}  